// banner
import "@/style/page/index.scss";
import { Col, Row, Flex, Typography, Carousel } from "antd";
import { useEffect, useState } from "react";
const { Paragraph } = Typography;
const dataList = [
    {
        title: "技术强硬",
        img: require("@/assets/index/banner_title_01.png"),
        content: "10年+大厂开发经验，技术更强硬",
    },
    {
        title: "36+行业解决方案",
        img: require("@/assets/index/banner_title_02.png"),
        content: "项目经验丰富，提供一站式解决方案",
    },
    {
        title: "完整服务体系",
        img: require("@/assets/index/banner_title_03.png"),
        content: "7*24小时客服在线，快速响应用户需求",
    },
];
function Banner(props) {
    const onChange = (currentSlide) => {
        console.log(currentSlide);
    };
    const [isIos, setIsIos] = useState(null);
    const isIOS = () => {
        const ua = navigator.userAgent.toLowerCase();
        const platform = navigator.platform.toLowerCase();

        if (/android/.test(ua)) {
            return "Android";
        } else if (/iphone|ipad|ipod/.test(ua)) {
            setIsIos(true);
        } else if (platform === "macintel" && navigator.maxTouchPoints > 1) {
            // 检测iPadOS桌面模式
            setIsIos(true);
        } else {
            setIsIos(false);
        }
        // // 提取 iOS 系统版本
        // const iosVersionMatch = navigator.userAgent.match(/OS\s(\d+(_\d+)*)/);
        // const iosVersion = iosVersionMatch
        //     ? iosVersionMatch[1].replace(/_/g, ".")
        //     : null;
        // setIsIos(iosVersion);
        // console.log("iOS版本:", iosVersion || "非iOS系统");
    };
    useEffect(() => {
        isIOS();
    }, []);
    return (
        <div className="Banner" id="Banner">
            {/* <img
                src={require("@/assets/index/banner.png")}
                alt="banner"
                className="bannerImg"
            /> */}
            <Carousel
                afterChange={onChange}
                autoplay={{
                    dotDuration: true,
                }}
                autoplaySpeed={5000}
            >
                <div>
                    <img
                        src={require("@/assets/index/banner.png")}
                        alt="banner"
                        className="bannerImg"
                    />
                </div>
                <div>
                    <img
                        src={require("@/assets/index/banner.png")}
                        alt="banner"
                        className="bannerImg"
                    />
                </div>
                <div>
                    <img
                        src={require("@/assets/index/banner.png")}
                        alt="banner"
                        className="bannerImg"
                    />
                </div>
                <div>
                    <img
                        src={require("@/assets/index/banner.png")}
                        alt="banner"
                        className="bannerImg"
                    />
                </div>
            </Carousel>
            <div
                className={
                    isIos ? "bannerContent  bannerContent_ios" : "bannerContent"
                }
            >
                {/* {isIos ? "当前运行环境是macOS" : "当前运行环境不是macOS"}
                {isIos} */}
                <Row>
                    {dataList.map((item, index) => (
                        <Col
                            span={24 / dataList.length}
                            key={"banner_icon" + index}
                        >
                            <Flex justify="center" align="center">
                                <img
                                    alt="avatar"
                                    src={item.img}
                                    className="bannerContentIcon"
                                />
                                <Flex
                                    vertical
                                    align="flex-start"
                                    justify="space-between"
                                    style={{
                                        padding: 32,
                                    }}
                                >
                                    <Typography.Title level={3}>
                                        {item.title}
                                    </Typography.Title>
                                    <Paragraph>{item.content}</Paragraph>
                                </Flex>
                            </Flex>
                        </Col>
                    ))}
                </Row>
            </div>
        </div>
    );
}

export default Banner;
